$(document).ready(function(){

//load function valid form 
Validation();
   //submit  form
    $("#myformComments").ajaxForm(insert);
});
	
	function insert(){
		$.ajax({
      url:'http://localhost/coments-ajax/insert.php',
      type:'POST',
data:{
	username:$('#nickname').val(),
	content:$('#area').val()

}
	}).done(function(data){
	   
	    
 		$('#comments').append('<span id="nick">'+$('#nickname').val()+'</span>'+'<br/>');
		 clock();
     $('#comments').append('<span id="content">'+$('#area').val()+'</span>');

$('#nickname').removeAttr("value");
$('#area').removeAttr("value");


  

      
         

	});
	}

	function Validation(){
	
		 $("#myformComments").validate({
 rules: {
    nickname: {
       required: true
      
     },
	 txtarea:{
	  required: true
	 }
   },
   messages: {
     nickname: {
       required: "filds name  is required",
       
     },
	 txtarea:{
	  required: "filds txtarea  is required"
	 }
	 
   }
	})
	}
	
	//o'clock and date
		function clock() {
	var d=new Date()
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var D = d.getDate();
var M = month[d.getUTCMonth()];
var Y = d.getFullYear();
var Hours = d.getHours();
var Minutes = d.getMinutes();
$('#comments').append('<span id="DateComments">'+D+' '+M+' '+Y+' '+Hours+':'+Minutes+'</p>');
}
	
	
	